<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template v-slot:header>
      <el-button
        type="primary"
        size="default"
        icon="ele-Plus"
        @click="showAddDialog"
        >添加</el-button
      >
    </template>
    <!-- element-puls 当中的表格和html中的表格不一样：以列为单位 -->
    <!-- el-table-column代表表格的列，表格有几列就复制几列 -->
    <!-- 
      table身上常用属性：
        data属性专门用于table当中传递动态数据，而且这个数据必须是对象的数组
        border 表格边框
        stripe 斑马状
      column身上也会有一些属性
        type 代表这个列的类型 type的值为index，代表序号列
        align 代表当中内容对齐方式 align:center
        width 代表列的宽度 没有px直接写数字
        prop 代表后续这一列在显示动态数据的时候，显示的是对象的那个属性
        label 达标列的名字
     -->
    <el-table border stripe :data="trademarkList">
      <el-table-column type="index" align="center" width="80" label="序号">
      </el-table-column>
      <el-table-column label="品牌名称" prop="tmName"> </el-table-column>
      <el-table-column label="品牌LOGO" prop="logoUrl">
        <!-- 使用作用域插槽给组件传递图片 -->
        <template v-slot="{ row }">
          <img :src="row.logoUrl" alt="" style="width: 100px; height: 60px" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <!-- 使用作用域插槽拿到点击的当前项 -->
        <template v-slot="{ row }">
          <el-button
            type="warning"
            size="small"
            icon="ele-Edit"
            @click="showUpdateDialog(row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            @click="deleteTrademark(row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <el-pagination
      style="margin-top: 20px"
      v-model:current-page="page"
      v-model:page-size="limit"
      :pager-count="9"
      :page-sizes="[3, 5, 7, 10]"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="getTrademarkList"
      @size-change="handleSizeChange"
    />

    <!-- 对话框表单 -->
    <el-dialog
      v-model="dialogFormVisible"
      :title="tmForm.id ? '修改品牌' : '添加品牌'"
    >
      <!-- :model="tmForm主要是用来做表单验证用的，只要是做表单验证，必须要写上这个验证规则和收集的数据对象，
      验证规则和收集的数据对象，没有联系，也就没法去正确进行规则的使用 -->
      <el-form
        style="width: 80%"
        :rules="rules"
        :model="tmForm"
        ref="tmFormRef"
      >
        <el-form-item label="品牌名称" label-width="100px" prop="tmName">
          <el-input autocomplete="off" v-model="tmForm.tmName" />
        </el-form-item>
        <el-form-item
          prop="logoUrl"
          label="品牌LOGO"
          style="font-weight: bold"
          label-width="100px"
        >
          <!-- 图片上传 -->
          <el-upload
            class="avatar-uploader"
            action="/app-dev/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="tmForm.logoUrl" :src="tmForm.logoUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            <!-- 上传下方提示信息 -->
            <template #tip>
              <div class="el-upload__tip" style="font-weight: normal">
                上传的图片必须是jpg且不能大于2M
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="addOrUpdateTrademark">
            提交
          </el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "TradeMark",
});
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import trademarkApi, { type TrademarkData } from "@/api/trademark";
import {
  ElMessage,
  ElMessageBox,
  type FormRules,
  type UploadProps,
} from "element-plus";
import { Plus } from "@element-plus/icons-vue";
const page = ref(1);
const limit = ref(3);
const total = ref(0);
const trademarkList = ref<TrademarkData[]>();

/** 获取分页信息模块 **/
// 请求获取品牌列表
const getTrademarkList = async (num: number = 1) => {
  page.value = num as number;
  try {
    const result = await trademarkApi.getPageList(page.value, limit.value);
    trademarkList.value = result.records;
    total.value = result.total;
  } catch (error) {
    ElMessage.error("获取品牌列表失败");
  }
};

// 切换每页展示条目信息
const handleSizeChange = (num: number) => {
  limit.value = num;
  getTrademarkList();
};

/** 添加模块 **/
const dialogFormVisible = ref<boolean>(false);
// 定义表单收集信息
const tmForm = ref<TrademarkData>({
  tmName: "",
  logoUrl: "",
});

// 点击弹窗
const showAddDialog = () => {
  dialogFormVisible.value = true;
  tmForm.value = {
    tmName: "",
    logoUrl: "",
  };
  // 重置验证信息，有错误才验证
  // 等待dom更新完成后，执行操作
  nextTick(() => {
    tmFormRef.value.resetFields();
  });
  // if (tmFormRef.value) {
  // tmFormRef.value.resetFields();
  // }
};

// 选择图片上传的回调
const handleAvatarSuccess: UploadProps["onSuccess"] = (response) => {
  // 将返回的图片数据赋值给当前文件框
  tmForm.value.logoUrl = response.data;
};

// 对文件的格式和大小进行限制
const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
  if (rawFile.type !== "image/jpeg") {
    ElMessage.error("图片必须是jpg格式!");
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error("图片的大小不能超过2MB!");
    return false;
  }
  return true;
};

// 点击修改的回调
const showUpdateDialog = (row: TrademarkData) => {
  dialogFormVisible.value = true;
  // 解决修改tmForm的时候row的值也会改变
  // 因为tmFrom和row用的都是同一个地址
  // 需要使用浅拷贝重新赋值新的对象地址
  tmForm.value = { ...row };
};

// 点击确定提交新增修改
const addOrUpdateTrademark = () => {
  // 对表单进行兜底验证 validate
  tmFormRef.value.validate(async (isValid: boolean) => {
    if (isValid) {
      try {
        // 发起新增修改请求
        await trademarkApi.addOrUpdate(tmForm.value);
        // 重新请求分页信息 修改留在当前页， 添加跳转第一页
        getTrademarkList(tmForm.value.id ? page.value : 1);
        // 成功提示消息
        ElMessage.success(tmForm.value.id ? "修改成功" : "添加成功");
        // 关闭对话框
        dialogFormVisible.value = false;
      } catch (error) {
        dialogFormVisible.value = false;
        ElMessage.error(tmForm.value.id ? "修改失败" : "添加失败");
      }
    }
  });
};

/** 删除程序 **/
const deleteTrademark = (id: number) => {
  // // 弹出消息弹出框
  try {
    ElMessageBox.confirm("是否要删除该品牌?", "Warning", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(async () => {
        try {
          await trademarkApi.delete(id);
          getTrademarkList(
            trademarkList.value?.length === 1 ? page.value - 1 : page.value
          );
          ElMessage.success("删除成功");
        } catch (error) {
          getTrademarkList(page.value);
          ElMessage.success("删除失败");
        }
      })
      .catch(() => {
        ElMessage({
          type: "info",
          message: "删除失败",
        });
      });
  } catch (error) {
    ElMessage.error("删除失败");
  }
};

const validateTmName = (rule: any, value: any, callback: any) => {
  if (value.length < 2 || value.length > 10) {
    callback(new Error("品牌名称需要为2-10个字符")); //在调用的时候传递错误信息，代表验证不通过
  } else {
    // 代表验证通过
    callback();
  }
};

// 表单验证规则
const rules = reactive<FormRules>({
  tmName: [
    { required: true, message: "品牌名称必填", trigger: "blur" },
    // { min: 2, max: 10, message: "品牌名称需要为2-10个字符", trigger: "change" },
    { validator: validateTmName, trigger: "change" },
  ],
  logoUrl: [{ required: true, message: "品牌Logo必填", trigger: "blur" }],
});
// 获取表单实例
const tmFormRef = ref();

onMounted(() => {
  getTrademarkList(1);
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
